<template>
    <div class="view">
        <android-nav-bar title="现金积分提现" v-on:back="back"></android-nav-bar>
        <div class="box">
            <div class="withdrawal-box">
                <div class="title">提现金额</div>
                <div class="amount">
                    <span>￥&nbsp;&nbsp;</span>
                    <input type="number" v-model="amount">
                </div>
                <div class="withdrawal-type" @click="toPage('mineBankCard',{temp:cardId,amount:amount,remark:remark})">
                    <div class="none-sel" v-if="cardSel==''"><span class="iconfont icon-xinyongqiahuankuan"></span>&nbsp;请{{bankCard.length?'选择':'添加'}}银行卡</div>
                    <div class="sel" v-if="cardSel!==''">{{cardSel}}</div>
                </div>
                <!--                <div class="mine-bank-card" @click="toPage('mineBankCard')">查看我的银行卡</div>-->
                <div class="remark">
                    <cube-textarea v-model="remark" placeholder="注:提现金额需为整百,可在此处添加备注!"></cube-textarea>
                </div>
                <div class="withdrawal" @click="withdrawal">下一步</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MineMoneyWithdrawal extends Scene {
        private publicPath: string = process.env.BASE_URL;
        @State("UserStore")
        public user!: InterfaceUser;
        private amount: number | string = "";
        private bankCard: any[] = [];
        private cardSel: string = "";
        private cardId: number = 0;
        private remark: string = "";

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private getBankCards(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                txt: "加载数据中...",
                mask: true
            }).show();
            Http.get(this.api.getUserCardList, {}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    loadToast.hide();
                    this.bankCard = res.data;
                    if (this.$route.query.temp&&this.$route.query.temp!=='0') {
                        const index = this.bankCard.findIndex((value) => value.id == Number(this.$route.query.temp));
                        this.cardSel = this.bankCard[index].bank + "  尾号为" + this.bankCard[index].card.substr(-5, 4);
                        this.cardId = this.bankCard[index].id;
                    }
                    if (this.$route.query.amount) {
                        this.amount = Number(this.$route.query.amount);
                    }
                    if (this.$route.query.remark) {
                        this.remark = String(this.$route.query.remark);
                    }
                } else {
                    loadToast.hide();
                    this.globalSingleResultToast(res);
                }
            }).catch((res) => {
                console.log(res)
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private withdrawal(): void {
            if (String(this.amount).slice(0, 1) == "0") {
                (<any> this).$createToast({
                    time: 1000,
                    type: "error",
                    txt: "提现金额有误",
                    mask: true
                }).show();
                return;
            } else if (String(this.amount).trim() == "" || this.amount <= 0) {
                (<any> this).$createToast({
                    time: 1000,
                    type: "error",
                    txt: "提现金额需大于0",
                    mask: true
                }).show();
                return;
            } else if ((Number(this.amount) % 100) > 0) {
                (<any> this).$createToast({
                    time: 1000,
                    type: "error",
                    txt: "提交金额需为整百的倍数",
                    mask: true
                }).show();
                return;
            } else if (Number(this.amount) > Number(this.user.money)) {
                (<any> this).$createToast({
                    time: 1000,
                    type: "error",
                    txt: "提交金额不能大于余额",
                    mask: true
                }).show();
                return;
            }
            if (this.cardSel == "") {
                (<any> this).$createToast({
                    time: 1000,
                    type: "error",
                    txt: `请先${this.bankCard.length ? "选择" : "添加"}银行卡`,
                    mask: true
                }).show();
                return;
            }
            let toast = (<any> this).$createToast({
                time: 0,
                txt: "提交中...",
                mask: true
            }).show();
            try {
                Http.post(this.api.userWithdraw, {amount: Number(this.amount), type: 1, id: this.cardId}, {token: this.user.token}).then((res) => {
                    if (res.code == 1) {
                        toast = (<any> this).$createToast({
                            time: 2500,
                            txt: "提现申请成功",
                            mask: true,
                            onTimeout: () => {
                                this.navigateBack();
                            }
                        }).show();
                    } else {
                        this.globalSingleResultToast(res);
                    }
                });
            } catch (e) {
                toast.hide();
                console.log(e);
            }
        }

        private mounted(): void {
            this.getBankCards();
        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow: hidden;

        .box
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - var(--safe-area-inset-top) - 47px);

            &::before
                display table;
                content '';

            .withdrawal-box
                margin 20px auto;
                padding 15px;
                width 90vw;
                background-color #fff;
                border-radius 10px;

                .amount
                    padding 20px 0 10px 0;
                    font-size 22px;
                    text-align center;
                    border-bottom 1px solid $theme-line-color;

                    span
                        display inline-block;
                        width 30px;

                    input
                        display inline-block;
                        width calc(100vw - 70px - 30px);

                .withdrawal-type
                    border 1px solid $theme-line-color;
                    border-radius 10px;
                    margin-top 20px;
                    padding 15px;

                .remark
                    margin-top 15px;
                    border 1px solid $theme-line-color;
                    border-radius 10px;
                    overflow hidden;

                    .cube-textarea-wrapper
                        height 80px;

                        &::after
                            display none;

                .withdrawal
                    color #fff;
                    height 45px;
                    line-height 45px;
                    text-align center;
                    border-radius 200px;
                    margin 20px 30px;
                    background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));


</style>
